<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!--
        el卡片布局分为头和体
        第一个子标签名就是头需要设置插槽
        slot="xxx"是旧版写法，新版写法为 v-slot:xxx,或简写为#xxx
       -->
      <el-card class="box-card">
        <template #header>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="组织架构" name="first" class="tab-pane">
              <!-- class="tab-pane"设置左右padding, 把内容往中间挤压 -->
              <!-- 使用 Layout 布局绘制头部区域
                最外层一行, 2列
                  el-row: type布局模式
                          justify两端对齐
                          align交叉轴排列方式(垂直方向居中)
               -->
              <el-row type="flex" justify="space-between" align="middle" class="department-header">
                <!-- 第一列20份 -->
                <el-col :span="20">
                  <i class="el-icon-s-home" />
                  <span class="company">江苏传智播客教育科技股份有限公司</span>
                </el-col>
                <!-- 第二列4份 -->
                <el-col :span="4">
                  <!-- 在容器范围里, 一行再分2列 -->
                  <el-row type="flex" justify="end">
                    <el-col>负责人</el-col>
                    <el-col>
                      <!-- 这个之前在头部导航右侧下拉菜单讲过 -->
                      <el-dropdown>
                        <!-- 下拉菜单文字 -->
                        <span class="el-dropdown-link">
                          操作<i class="el-icon-arrow-down el-icon--right" />
                        </span>
                        <!-- 下拉项 -->
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item @click.native="add()">添加子部门</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-tab-pane>
            <!-- 树形组件 -->
            <el-tree class="departments-tree" :data="treeData" :props="defaultProps" :default-expand-all="true">
              <!-- 默认插槽  并且使用内部的数据进行自定义模板的渲染
                  scope.data 所以直接key解构赋值变量也是data(对应数据对象)
                 -->
              <!-- 作用域插槽：当插槽想用组件内的变量时，得用作用域插槽拿到数据
                    vue2.6之前，slot-scope="变量名"
                    vue2.6之后，v-slot="变量名"
                    以前v-slot="scope"，使用的时候就是scope.data
                    现在v-slot="{data}",data变量拿到的就是scope.data的值
               -->
              <template #default="{ data }">
                <el-row
                  type="flex"
                  justify="space-between"
                  align="middle"
                  style="height: 40px; width: 100%;"
                >
                  <!-- 部门名字 -->
                  <el-col :span="20">
                    <span>{{ data.name }}</span>
                  </el-col>
                  <!-- 功能操作区域 -->
                  <el-col :span="4">
                    <el-row type="flex" justify="end">
                      <!-- 两个内容 -->
                      <el-col>{{ data.name }}</el-col>
                      <el-col>
                        <!-- 下拉菜单 element -->
                        <el-dropdown>
                          <span> 操作<i class="el-icon-arrow-down" /> </span>
                          <!-- 下拉菜单 -->
                          <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="add(data)">添加子部门</el-dropdown-item>
                            <el-dropdown-item @click.native="edit(data)">编辑部门</el-dropdown-item>
                            <!-- 在一个部门里有子部门时候，不显示删除部门的区域 -->
                            <el-dropdown-item v-if="!data.children" @click.native="del(data)">删除部门</el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </template>
            </el-tree>
          </el-tabs>
        </template>
      </el-card>

      <!-- 新增部门的弹窗 -->
      <!-- 父传子第二步：给子组件传值 -->
      <DepartDialog
        ref="departDialogRef"
        :dialog-visible.sync="dialogVisible"
        :employee-list="employeeList"
        :origin-list="originList"
        :is-edit="isEdit"
        :parent-id="nowDepartId"
        @departEV="addOrEditDepartFn"
      />
    </div>
  </div>
</template>

<script>
import {
  departmentsListAPI,
  getEmployeeSimpleAPI,
  addDepartmentsAPI,
  getDepartDetailAPI,
  updateDepartmentsAPI,
  delDepartmentAPI
} from '@/api/'
import { transTree } from '@/utils/index.js'

// 引入组件
import DepartDialog from './components/departDialog.vue'
export default {
  name: 'Departments',
  // 注册组件
  components: {
    DepartDialog
  },
  data() {
    return {
      activeName: 'first', // 被激活的 Tab 标签页
      // 树形控件数据
      treeData: [
      ],
      // 定义结构显示
      defaultProps: {
        children: 'children',
        label: 'departName'
      },
      // 控制添加弹窗的开启/关闭
      dialogVisible: false,
      // 员工列表
      employeeList: [],
      // 当前点击这行的部门的id
      nowDepartId: '',
      // 编辑状态的标记
      isEdit: false,
      // 子组件遍历所有部门
      originList: []
    }
  },
  created() {
    this.getDepartmentsList()
    this.getEmployeesListFn()
  },
  methods: {
    // 树形控件的点击事件
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 获取部门列表
    async getDepartmentsList() {
      const res = await departmentsListAPI()
      // console.log(res)
      // 格式化需要传递给子组件的数据
      // 因为对象里item字段很多，所以一一映射成新的对象收集到新数组里
      this.originList = res.data.depts.map(item => (
        {
          id: item.id,
          code: item.code,
          name: item.name,
          pid: item.pid // 下面使用
        }
      ))
      // 调用treeData方法，找到''的子部门(一级部门)
      this.treeData = transTree(res.data.depts, '')
    },
    // 获取部门负责人信息
    async getEmployeesListFn() {
      const res = await getEmployeeSimpleAPI()
      // console.log(res)
      this.employeeList = res.data
    },
    // 右侧-右侧的添加子部门
    add(data) {
      // console.log(data)
      // 编辑的标记
      this.isEdit = false
      if (data) { // 点击的是每个部门里的新增，要添加的是二级部门
        this.nowDepartId = data.id
        this.dialogVisible = true
      } else { // 点击的是第一行的新增，要添加的是一级部门
        // 父部门的id=子部门的pid
        // 一级部门的pid=公司的id=''
        this.nowDepartId = ''
        this.dialogVisible = true
      }
    },
    // 右侧-编辑子部分
    edit(data) {
      // 打上编辑状态的标记
      this.isEdit = true
      // 打开弹窗
      this.dialogVisible = true
      // 获取当前id
      this.nowDepartId = data.id
      // 数据填写->真实dom更新是异步的，所以确保弹窗出现后再请求数据
      this.$nextTick(async() => {
        // 调接口，传入当前id获取数据
        const res = await getDepartDetailAPI(this.nowDepartId)
        // console.log(res)
        // 数据回显
        // 方式一：给组件定义props，把res.data保存再父组件中，父传子进去，子组件内watch侦听props的改变
        // 方式二：直接选中子组件departDialogRef，将获取到的数据传给departDialogRef的form变量
        this.$refs.departDialogRef.form = res.data
        this.getDepartmentsList()
      })
    },
    // 右侧-删除部分
    async del(data) {
      // 判断：如果一个部门具有子部门，则该部门不能被删除
      // 从项目的实际清空来考虑，如果一个部门不可被删除，则可以不出现删除的区域，用v-if判断是否渲染删除功能按钮即可
      // if (data.children && data.children instanceof Array && data.children.length > 0) {
      //   this.$message.warning('具有子部门的部门不可被删除')
      //   return
      // }
      const res = await delDepartmentAPI(data.id)
      // console.log(res)
      if (res.code === 10000) {
        this.$message.success(res.message)
      }
      this.getDepartmentsList()
    },
    // 新增/编辑部门
    async addOrEditDepartFn(dataObj) {
      // console.log(dataObj)
      if (this.isEdit) { // 编辑
        const res = await updateDepartmentsAPI(dataObj)
        console.log(res)
        if (res.code === 10000) {
          this.$message.success(res.message)
        }
      } else { // 新增
        // 把当前选中的部门的id传给dataObj
        dataObj.pid = this.nowDepartId
        const res = await addDepartmentsAPI(dataObj)
        // console.log(res)
        if (res.code === 10000) {
          this.$message.success(res.message)
        }
      }
      // 刷新部门列表
      this.getDepartmentsList()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tree-node__content {
  height: 30px !important;
  font-size: 14px !important;
}
.box-card {
  padding: 10px 30px;
}

.tab-pane {
  padding: 20px 80px;

  .company {
    margin-left: 12px;
    font-weight: bold;
    font-size: 14px;
  }

  .department-header {
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
  }
}

</style>
